<template>
  <a-list v-if="top10Data">
    <a-list-item v-for="(item,index) in top10Data" :key="index">
      <a-list-item-meta style="text-align: left;width: 100%">
        <template #avatar>
          <a-image
              width="36"
              height="48"
              :src="item.cover_image"
              show-loader/>
        </template>
        <template #title>
          <div class="text-ellipsis" style="width: 280px;">
            {{ item.title }}
          </div>
        </template>
        <template #description>
          <a-space class="flex justify-between">
            <a-link :href="item.detail_page" target="_blank">
              <div class="text-ellipsis">
                详情
              </div>
            </a-link>
            <div style="display: inline-block">
              {{ item.publish_time }}
            </div>
            <a-tooltip position="left">
              <template #content>
                <a-space>
                  <a-space>
                    <a-tooltip content="播放量">
                      <icon-eye/>
                    </a-tooltip>
                    {{ item.stats.view_count }}
                  </a-space>
                  <a-space>
                    <a-tooltip content="评论量">
                      <IconMessage/>
                    </a-tooltip>
                    {{ item.stats.comment_count }}
                  </a-space>
                  <a-space>
                    <a-tooltip content="收藏量">
                      <IconStar/>
                    </a-tooltip>
                    {{ item.stats.collect_count }}
                  </a-space>
                  <a-space>
                    <a-tooltip content="点赞量">
                      <IconHeart/>
                    </a-tooltip>
                    {{ item.stats.like_count }}
                  </a-space>
                  <a-space>
                    <a-tooltip content="分享量">
                      <icon-share-internal/>
                    </a-tooltip>
                    {{ item.stats.share_count }}
                  </a-space>
                </a-space>
              </template>
              <div>
                <icon-eye/>
                <span style="margin-left: 5px">
                              {{ item.stats.view_count }}
                            </span>
              </div>
            </a-tooltip>
          </a-space>
        </template>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
  <a-spin dot v-else/>
</template>


<script setup>
import {ref} from "vue";
import {top10DataList} from "../../../api/monitorManageMG.js";
import {Message} from "@arco-design/web-vue";

const props = defineProps({platform: String})

// ---------------------------------------------------------
// 切换tab相关
const top10Data = ref()

//获取top10的数据
async function fetchTop10Data(params) {
  try {
    top10Data.value = await top10DataList(params);
    console.log(top10Data.value)
  } catch (error) {
    Message.error(error.message);
  }
}

fetchTop10Data({'platform': props.platform})
</script>

<style scoped>

</style>